<template>
  <div class="copyright_submit max-w-[900px] mx-auto">
    <el-card header="上传作品">
      <el-form @submit.prevent label-position="top">
        <el-form-item label="申领类型">
          <el-radio-group
            v-model="formData.type"
            class="flex !items-start flex-col"
          >
            <el-radio :value="1" label="一般作品申领"></el-radio>
            <el-radio :value="2" label="系列图作品申领">
              系列图作品申领
              <span class="text-gray-400 font-normal">
                （适用于需要多张图片来展示同一作品）
              </span>
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card header="文件上传" class="mt-4">
      <upload
        v-model="formData.fileUrl"
        :file-size="fileSize"
        accept="video/*,image/*,audio/*,application/pdf"
      >
        <template #tip>
          作品需符合《中华人民共和国著作权法》规定的作品，具有一定独创性，文件清晰可见
          <br />
          一次申领只能上传一个文件，文件名不超过50个字
        </template>
      </upload>

      <div class="text-base py-2 text-red-500">
        提交申领DCI的作品应为原创作品，若经审核发现为未经授权的恶意盗用、抄袭他人作品，需要承担相应的责任并接受处罚
      </div>
      <div class="text-sm text-black pb-2">
        上传文件类型格式需满足以下条件：
      </div>
      <div class="text-sm text-gray-400">
        <div class="pb-2">
          图片类文件
          <br />
          指美术、摄影、建筑、工程设计图、产品设计图、示意图、模型作品；支持JPG、PNG、JPEG；大小不超过5M；图片像素不低于
          <br />
          400*400，不高于5000*5000；
        </div>
        <div class="pb-2">
          视频类文件
          <br />
          指电影、类似摄制电影方法创作的作品 ；支持MP4、AVI、WMV
          ；大小不超过200M；视频长度不小于10s
        </div>
        <div class="pb-2">
          文字类文件
          <br />
          指文字、戏剧作品；支持PDF ；大小不超过10M
        </div>
        <div class="pb-2">
          音频类文件
          <br />
          指口述、音乐作品；支持MP3、WAV；大小不超过50M
        </div>
      </div>
    </el-card>

    <div class="bottom-buttons relative">
      <el-button
        type="primary"
        :disabled="!formData.fileUrl"
        @click="onSubmit">
        保存
      </el-button>
      <router-link to="./index">
        <el-button type="danger" plain>取消</el-button>
      </router-link>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, reactive, computed } from "vue"
import upload from "@/components/upload.vue"
import { message } from "@/Hooks/Element-plus"

// 表单数据
const formData = ref({
  type: 1,
  fileUrl: "",
})

// 文件大小限制
const fileSize = {
  image: 5,
  video: 200,
  pdf: 10,
  audio: 50,
}

const onSubmit = () => {
  formData.value = {
    type: 1,
    fileUrl: "",
  }
  message("success", "提交成功")
}
</script>

<style lang="scss" scoped>
.copyright_submit {
  position: relative;
  min-height: 950px;

  :deep(.el-radio) {
    --el-radio-text-color: #222;

    .el-radio__input.is-checked + .el-radio__label {
      font-weight: bold;
      color: var(--el-radio-text-color);
    }
  }
}
</style>
